<template>
    <div class="change-password">
        <div class="pass-tips">新密码由数字和字母共同组成,长度6-16位</div>
        <el-form :model="form" :rules="rules" ref="editPass" style="text-align: center;" class="demo-ruleForm">
          <el-form-item prop="oldPassword" :label-width="formLabelWidth" style="margin-right: 60px;">
            <el-input v-model="form.oldPassword" placeholder="请输入旧密码" ></el-input>
          </el-form-item>
          <el-form-item prop="password" :label-width="formLabelWidth" style="margin-right: 60px;">
            <el-input v-model="form.password" placeholder='请输入新密码'>
            </el-input>
          </el-form-item>
          <el-form-item prop="checkPass" :label-width="formLabelWidth" style="margin-right: 60px;">
            <el-input v-model="form.checkPass" placeholder="请再次输入新密码">
            </el-input>
          </el-form-item>
        
          <el-form-item style="text-align: left;margin-right: 60px;" :label-width="formLabelWidth">
            <el-button type="primary" @click="submitForm"
              style="padding: 8px 14px !important;color: #fff;">提交</el-button>
            <el-button @click="resetForm" style=" padding: 8px 14px !important;border: 1px solid #d5d4d4;color: #333;background: #fff;">重置</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>
<script>
import TokenCache from "@/utils/cache/TokenCache";
export default {
  name: "changePassword",
  data(){
    var checkAge = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('请输入旧密码'));
      }else{
        callback()
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else {
        if (this.form.checkPass !== '') {
          this.$refs.editPass.validateField('checkPass');
        }
        callback();
      }
    };

    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'));
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    return {
      
      form: {
        password: '',
        checkPass: '',
        oldPassword: ''
      },
      formLabelWidth:'60px',
      rules: {
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        oldPassword: [
          { validator: checkAge, trigger: 'blur' }
        ]
        
      },
    }
  },
  created(){},
  methods:{
    submitForm() {
    
      this.$refs.editPass.validate((valid) => {
        if(valid){
          console.log(this.form)
       
         

        }
      })

    },
    resetForm(formName) {
      this.$refs.editPass.resetFields();
    },
  }
}
</script>
<style lang="scss" scoped>
.el-drawer__body{
  background: #fff;
}
.pass-tips {
  font-size: 13px;
  color: #f17522 ;
  text-align: center;
}

::v-deep.el-form-item--small .el-form-item__content {
  width: 70% !important;
}

.el-drawer__header {
  align-items: center;
  display: flex;
  margin-bottom: 0;
  padding: 10px 20px;
  font-size: 15px;
  color: #000;
  background: #f5f5f5;
}

.el-input--small .el-input__inner {
  height: 38px;
  line-height: 38px;
}

.el-form-item--small .el-form-item__error {
  padding-top: 2px;
  /* border: 1px solid #000; */
  width: 75%;
  text-align: left;
  margin: 0 auto;
}

.el-form-item__error {
  position: static;
}

.el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu__item:focus {
  background: #e1effc;
  color: #001C37 ;
}
.el-button:hover,
.el-button:focus{
  color: #FFF;
  background-color: #409EFF;
  border-color: #409EFF;
}
</style>